<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>系统管理</title>
</head>
<body>
<div class="box">
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <form role="form">
                <div class="form-group col-md-7">
                    <label>所属Appid：<input type="text" value="{$appid}" disabled="disabled" id="appid" style="height: 30px;color: orange;border: 0px;padding-left: 7px;"></label>
                </div>
                <div class="col-sm-12">
                    <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                        <thead>
                        <tr role="row">
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 90px;">标题</th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 190px;">图片链接</th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 120px;">跳转链接</th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 120px;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tb">
                        <tr role="row" class="odd" >
                            <td><input type="text" id="title" class="form-control" value="" placeholder="标题..."></td>
                            <td><input type="text" id="imgurl" class="form-control" value="" placeholder="图片链接..."></td>
                            <td><input type="text" id="turl" class="form-control" value="" placeholder="跳转链接..."></td>
                            <td align="center">
                                <div class="btn btn-block btn-flat btn-danger" style="width: 40px;"><i class="fa fa-minus-square"></i></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-group col-md-7">
                    <div id="addtd" style="width: 100%;height: 35px;line-height: 35px;border: 1px solid #CCCCCC;text-align: center;background: #ffffff;cursor: pointer;">+新增</div>
                </div>
                <div class="form-group col-md-7">
                    <label>发送模式</label>
                    <select id="select" class="form-control select2" style="width: 120px;">
                        <option value="1" selected="selected">测试发生</option>
                        <option value="2">立即发生</option>
                        <option value="3">定时发生</option>
                    </select>
                </div>
                <div class="form-group col-md-7" id="openiddiv">
                    <label>测试openId</label>
                    <input type="text" id="openid" class="form-control" placeholder="openId...">
                </div>
                <div class="form-group col-md-7" id="sendtimediv" style="display: none;">
                    <label>定时发送</label>
                    <input type="text" id="sendtime" class="form-control" placeholder="选择时间...">
                </div>
                <div class="form-group col-md-7">
                    <div id="btn_add" class="btn btn-info btn-flat pull-right">确定</div>
                </div>
            </form>
        </div>
    <!-- /.box-body -->
    </section>
</div>
</body>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#sendtime' //指定元素
            ,type:'datetime'
        });
    });
    $(function(){
        $('#addtd').click(function(){
            var html = '<tr role="row" class="odd" >';
            html += '<td><input type="text" id="title" class="form-control" value="" placeholder="标题..."></td>';
            html += '<td><input type="text" id="imgurl" class="form-control" value="" placeholder="图片链接..."></td>';
            html += '<td><input type="text" id="turl" class="form-control" value="" placeholder="跳转链接..."></td>';
            html += ' <td align="center"><div class="btn btn-block btn-flat btn-danger" style="width: 40px;"><i class="fa fa-minus-square"></i></div></td>';
            html += '</tr>';
            $('#tb').append(html);
        });
        $(document).on('click','.btn-danger',function () {
            var $_this = $(this);
            $_this.parent().parent().remove();
        });
        $('#select').change(function(){
            var _val = $(this).val();
            if(_val == 1){
                $('#openiddiv').show();
                $('#sendtimediv').hide();
            }else if(_val == 2){
                $('#openiddiv').hide();
                $('#sendtimediv').hide();
            }else if(_val == 3){
                $('#openiddiv').hide();
                $('#sendtimediv').show();
            }
        })
    })
</script>
</html>